<template>
  <div>
    <el-form ref="form" :model="form" label-width="120px"  :inline="true" size="small" :rules="rules">
      <el-form-item label="系统名称：" prop="name">
        <el-input v-model="form.name" class="short"></el-input>
      </el-form-item>
      <el-form-item label="API能力简称：" prop="sysDesc">
        <el-input v-model="form.sysDesc" class="short"></el-input>
      </el-form-item>
      <el-form-item label="系统编码：" prop="code">
        <el-input v-model="form.code" class="short"></el-input>
      </el-form-item>
      <el-form-item label="系统IP地址：" prop="ip">
        <el-input v-model="form.ip" class="short"></el-input>
      </el-form-item>
      <el-form-item label="备注：">
        <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            class="long"
            v-model="form.remark">
        </el-input>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
let defaultForm = {
  "code": "",
  "ip": "",
  "name": "",
  "remark": "",
  "sysDesc": ""
}
export default {
  name: "systemForm",
  methods:{
    setData(data){
      Object.keys(this.form).forEach(x=>{
        this.form[x] = data[x]
      })
    },
    getData(){
      return new Promise((res,rej)=>{
        this.$refs.form.validate(v=>{
          if(v){
            res(this.form)
          }
        })
      })
    },
  },
  data(){
    return {
      rules:{
        code: [{ required: true, message: '必填' }],
        ip: [{ required: true, message: '必填',  }],
        name: [{ required: true, message: '必填',  }],
        sysDesc: [{ required: true, message: '必填',}],
      },
      form:{
        ...defaultForm
      }
    }
  },
}
</script>

<style scoped>
.short{
  width: 260px;
}
.long{
  width: 650px;
}

</style>